<template>
  <button class="ping-button" :class="classes">
      <slot><img :scr="randomImage" /></slot>
  </button>
</template>

<script>
const props = {
    theme: {
        type: String,
        default: 'default',
        required: false
    },
    dashed: {
        type: Boolean,
        default: false,
        required: false
    },
    size: {
        type: String,
        default: "default",
        required: false
    },
    round: {
        type: Boolean,
        default: false,
        required: false
    },
    disabled: {
        type: Boolean,
        default: false,
        required: false
    },
    loading: {
        type: Boolean,
        default: false,
        required: false
    },
};

export default {
    name: 'ping-button',
    props,
    data(){
        return{
            randomImage: ""
        }
    },
    computed: {
        classes() {
            const { theme, dashed, size, round, disabled } = this.props || props;
            return {
                [`ping-theme-${theme}`]: theme,
                [`ping-theme-dashed`]: dashed,
                [`ping-size-${size}`]: size,
                [`is-round`]: round,
                [`is-disabled`]: disabled,
            };
        }
    },
    created(){
        this.queryRandomImage()
    },
    methods: {
        queryRandomImage(){
            fetch('https://api.boot.jeecg.com/sys/randomImage/1650190618876')
                .then(response => response.json())
                .then(response => {
                    const { success, code, result } = response;
                    if(success){
                        this.randomImage = result;
                    }
                    console.log(response)
                });
        }
    }
}
</script>


<style lang="scss" scoped>

$h-default: 32px;
$h-small: 20px;
$h-large: 48px;
$white: #fff;
$default-color: #333;
$primary-color: #36ad6a;
$info-color: #4098fc;
$success-color: #85ce61;
$warning-color: #f0a020;
$error-color: #d03050;
$grey: grey;

$default-border-color: #d9d9d9;

$radius: 3px;
$green: #18a058;

.ping-button{
    box-sizing: border-box;
    height: $h-default;
    background-color: #fff;
    padding: 0 12px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    border-radius: $radius;
    box-shadow: 0 1px 0 fade-out(black, 0.95);
    transition: all 250ms;
    color: $default-color;
    border: 1px solid $default-border-color;
    user-select: none;

    &:focus {
        outline: none;
    }

    &::-moz-focus-inner {
        border: 0;
    }

    &.ping-size-large {
        font-size: 24px;
        height: $h-large;
        padding: 0 16px;
    }
    &.ping-size-small {
        font-size: 12px;
        height: $h-small;
        padding: 0 8px;
    }

    &.is-round.ping-size-default {
        border-radius: calc($h-default / 2);
    }
    &.is-round.ping-size-large {
        border-radius: calc($h-large / 2);
    }
    &.is-round.ping-size-small {
        border-radius: calc($h-small / 2);
    }

    &.ping-theme-default {
        &:hover {
            color: $green;
            border-color: $green;
        }
    }


}
</style>